// src/APP.vue

<template>
  <div id="dynamic-component-demo" class="demo">
    <button
      v-for="tab in tabs"
      v-bind:key="tab"
      v-bind:class="['tab-button', { active: currentTab === tab }]"
      v-on:click="currentTab = tab"
    >
      {{ tab }}
    </button>

    <!-- 失活的组件将会被缓存！-->
    <keep-alive>
      <component v-bind:is="currentTabComponent" class="tab"></component>
    </keep-alive>
</div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from 'vue'
import TabHome from './components/tab-home.vue'
import TabPosts from './components/tab-posts.vue'
import TabArchive from './components/tab-archive.vue'

export default defineComponent({
  name:"APP",
  components: {
    TabHome,
    TabPosts,
    TabArchive
  },
  setup() {
    const datas = reactive({
      currentTab: 'Home',
      tabs: ['Home', 'Posts', 'Archive']
    })

    const currentTabComponent = computed(() => 'tab-'+datas.currentTab.toLowerCase())

    return {
      ...toRefs(datas),
      currentTabComponent
    }
  }
})
</script>